<template>
  <div class="page">
    <h3 class="title">案件查询</h3>

    <el-form :inline="true" :model="searchForm" label-width="100px">
      <el-form-item label="月份">
        <el-date-picker v-model="searchForm.month" type="month" value-format="yyyy-MM" placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="案件类型">
        <el-select v-model="searchForm.case_type" placeholder="请选择">
          <el-option v-for="opt in typeOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="案件状态">
        <el-select v-model="searchForm.case_status" placeholder="请选择">
          <el-option v-for="opt in statusOptions" :key="opt.value" :label="opt.label" :value="opt.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="关键词">
        <el-input v-model="searchForm.keyword" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchCase">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column prop="case_no" label="案件编码" align="center" />
      <el-table-column prop="case_name" label="案件名称" align="center" />
      <el-table-column prop="case_commit_time" label="提交时间" align="center" />
      <el-table-column prop="case_type" label="案件类型" align="center" />
      <el-table-column prop="case_status" label="案件状态" align="center" />
      <el-table-column prop="apply_police" label="申请民警" align="center" />
      <el-table-column prop="sign_police" label="签收民警" align="center" />
      <el-table-column prop="handle_police" label="办理民警" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="reviewDetail(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
      layout="total, sizes, prev, pager, next" :total="totalItems" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        month: '',
        case_type: '0',
        case_status: '0',
        keyword: ''
      },
      typeOptions: [
        { value: '0', label: '全部' },
        { value: '1', label: '刑事案件' },
        { value: '2', label: '行政案件' },
        { value: '3', label: '其它' },
      ],
      statusOptions: [
        { value: '0', label: '全部' },
        { value: '1', label: '暂存' },
        { value: '2', label: '待审核' },
        { value: '3', label: '待分配' },
        { value: '4', label: '已审核-待签收' },
        { value: '5', label: '已签收-待办理' },
        { value: '6', label: '已办理' }
      ],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalItems: 20
    }
  },
  mounted() {
    const caseTypeArr = ['刑事案件', '行政案件', '其它']
    const caseStatusArr = ['暂存', '待审核', '待分配', '已审核-待签收', '已签收-待办理', '已办理']

    const data = Array.from({ length: 20 }, (v, k) => {
      return {
        case_no: `GDcy20240301${k}`,
        case_name: `案件名称_${k}`,
        case_commit_time: `2024-03-01`,
        case_type: caseTypeArr[k % 3],
        case_status: caseStatusArr[k % 6],
        apply_police: `张三`,
        sign_police: `李四`,
        handle_police: `王五`
      }
    })
    this.tableData = [...data]
    this.getList()
  },
  methods: {
    searchCase() {
      this.currentPage = 1
      this.getList()
    },
    reviewDetail(row) {
      this.$router.push({ name: 'caseDetail', params: { id: row.case_no } })
    },
    getList() {
      // Implement your API call to fetch the data based on searchKeyword, currentPage, and pageSize
      // Update tableData and totalItems accordingly
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.getList()
    },
    handleCurrentChange(page) {
      this.currentPage = page
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  .title {
    margin: 0px auto 30px;
    // text-align: center;
    // color: #707070;
  }
}
</style>
